<!-- navigation -->
<section
  class="one-section one-navigation-section wt pc-safeCol wap-safeTop wap-safeBottom2"
  data-title="navigation"
>
  <div class="pc-safeRow2 wap-safeRow2 one-pc-flexRow one-wap-flexRow one-navigation-content">
    {%- for block in section.blocks -%}
      <div class="one-navigation-item one-pc-flexCol" style="background:{{ block.settings.background_color }}">
        <picture class="one-wapHide">
          <img class="cover" src="{{ block.settings.desktop_image | img_url: "master" }}" loading="lazy">
        </picture>
        <picture class="one-pcHide">
          <img class="cover" src="{{ block.settings.mobile_image | img_url: "master" }}" loading="lazy">
        </picture>
        <div
          class="one-pc-flexCol one-wap-flexCol one-navigation-info one-pc-rowCenter2 one-wap-rowCenter2 bk"
        >
          <p class="one-h2">{{ block.settings.title }}</p>
          <p class="one-sh2 m">{{ block.settings.desc }}</p>
        </div>
        <div
          class="one-navigation-btnBox  one-wap-rowCenter2 one-pc-rowCenter2 one-pc-flexRow one-wap-flexRow"
        >
          <a class="one-navigation-play-btn" href="{{ block.settings.button_link_1 }}">
            <p class="one-b3 one-pc-wt one-wap-wt">Buy now</p>
          </a>
          <a class="one-navigation-nav-btn one-pc-flexRow one-wap-flexRow" href="{{ block.settings.button_link_2 }}">
            <p class="one-b3 one-pc-wt one-wap-wt">Explore</p>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="32"
              height="32"
              viewBox="0 0 32 32"
              fill="none"
            >
              <path d="M14.3984 11.1998L19.1984 15.9998L14.3984 20.7998" stroke="white"
                  stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    {%- endfor -%}
  </div>
</section>

{% schema %}
{
  "name": "Navigation",
  "settings": [],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "label": "Desktop image",
          "type": "image_picker",
          "id": "desktop_image"
        },
        {
          "label": "Mobile image",
          "type": "image_picker",
          "id": "mobile_image"
        },
        {
          "label": "Txt image",
          "type": "image_picker",
          "id": "txt_image"
        },
        {
          "type": "text",
          "id": "background_color",
          "label": "Background Color"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "desc",
          "label": "Desc"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "First button link"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "Second button link"
        }
      ]
    }
  ]
}
{% endschema %}
